iT邦幫忙

2023 iThome 鐵人賽

DAY 19
0
Modern Web

三十天持續努力挑戰py系列 第 19

Day_19 Bootstrap_再也不寫css

  • 分享至 

  • xImage
  •  
  • Bootstrap是一個流行的開源前端框架,用於快速、簡單地創建具有現代外觀和功能的網頁和Web應用程式。以下是Bootstrap的簡單介紹:https://bootstrap5.hexschool.com/docs/5.1/getting-started/introduction/
    • Bootstrap內置了響應式網頁設計,這意味著您的網頁能夠在不同大小的螢幕上(例如桌面、平板和手機)自動調整和呈現。這有助於確保您的網頁在各種設備上都能正常運行。
    • Bootstrap提供了大量的現成UI組件和工具,如模態對話框、警報、選單、導航條、分頁等等。這些組件可以通過添加預定義的HTML結構和CSS類別來輕鬆集成到您的項目中。
    • Bootstrap是一個強大的工具,可幫助前端開發人員快速建立現代且具有響應性的網頁和Web應用程式。它簡化了設計過程,節省了開發時間,並確保您的項目在不同設備上都能提供出色的用戶體驗。不論您是新手還是經驗豐富的開發人員,都可以受益於Bootstrap的使用。
    • 在此網址裡面能看到左邊有一排標題,可以根據你想要做的事情點開分類,再看詳細的小標題去尋找想要的功能。
      https://ithelp.ithome.com.tw/upload/images/20230912/201621703XtjYHpw8U.pnghttps://ithelp.ithome.com.tw/upload/images/20230912/20162170pZFZloYlZu.pnghttps://ithelp.ithome.com.tw/upload/images/20230912/201621706YIlssILK6.png
    • 像我現在想要排版,可以點排版的分類使用裡面的程式碼,看一下我要哪種的排版,直接複製他下面的程式碼,再慢慢地試試要哪種。
      https://ithelp.ithome.com.tw/upload/images/20230912/20162170AYgsvTML3J.png
      https://ithelp.ithome.com.tw/upload/images/20230912/20162170gcK5xoPKNA.png
    <div class="container">
    <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
    </div>
    <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
    </div>
    <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
    </div>
    <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
    </div>
    <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
    </div>
    <div class="row justify-content-evenly">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
    </div>
    

上一篇
Day_18 CDN_讓你的網頁變得更簡潔
下一篇
Day_20 Button With Bootstrap
系列文
三十天持續努力挑戰py30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言